import React, { Component } from 'react'
import store from '../../../redux'
import Api from '../../../config/api'
import axios from 'axios'
import Com from '../../../common/common'

import Table from 'antd/lib/table'
import Button from 'antd/lib/button'

import Navbar from '../../../Component/navbar'
import Spin from 'antd/lib/spin'
import Icon from 'antd/lib/icon'
import Input from 'antd/lib/input'
import Select from 'antd/lib/select'
import DatePicker from 'antd/lib/date-picker'
import Form from 'antd/lib/form'
import message from 'antd/lib/message'
import Modal from 'antd/lib/modal'
import Popconfirm from 'antd/lib/popconfirm'

import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const antIcon = <Icon type="loading" style={{ fontSize: 24, marginTop: 200 }} spin />;
const Option = Select.Option;
const FormItem = Form.Item;
const confirm = Modal.confirm;
const { TextArea } = Input;

let oper = null;

const validateNumber = (rule, value, callback) => {
    let reg = /^\d*$/g;
    if (value) {
        if (reg.test(value)) {
            callback()
        }
        else {
            callback('必须是数字')
        }
    }
    else {
        callback()
    }
}

class OperBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            startDate: '',
            endDate: '',
            startMonent: null,
            endMoment: null,
            OperatorEnum: [{ index: '', desc: '全部' }],
            ProtocolEnum: [{ index: '', desc: '全部' }],
            TypeEnum: [{ index: '', desc: '全部' }],
            SmsUserStatusEnum: [{ index: '', desc: '全部' }],
            chargingTypeArr:[],
            showAddModal: false
        }
    }
    componentDidMount() {
        this.getSelect();
    }
    async getSelect() {
        await Com.getSelection.call(this, 'SmsGatewayTypeEnum', 'OperatorEnum');
        await Com.getSelection.call(this, 'SmsGatewayProtocolEnum', 'ProtocolEnum');
        await Com.getSelection.call(this, 'SmsGatewayStatusEnum', 'SmsUserStatusEnum');
        await Com.getSelection.call(this, 'SmsUserTypeEnum', 'TypeEnum');
        await Com.getSelection.call(this, 'SmsGatewayChargingTypeEnum', 'chargingTypeArr',false);
        this.search();
    }
    getTime(type, moment, time) {
        if (type === 'start') {
            this.setState({
                startDate: time,
                startMoment: moment
            })
        }
        else {
            this.setState({
                endDate: time,
                endMoment: moment
            })
        }
    }
    disabledstartTime(current) {
        if (this.state.endMoment) {
            return current > this.state.endMoment
        }
        else {
            return false
        }
    }
    disabledendTime(current) {
        if (this.state.startMoment) {
            return current < this.state.startMoment
        }
        else {
            return false
        }
    }
    search() {
        let obj = {
            name: this.nameInput.input.value,
            code: this.codeInput.input.value,
            protocol: this.httpInput.rcSelect.state.value[0],
            type: this.operatorInput.rcSelect.state.value[0],
            gatewayType: this.gatewayTypeInput.rcSelect.state.value[0],
            accessNumber: this.accessNumberInput.input.value,
            status: this.userStatusInput.rcSelect.state.value[0],
            startTime: this.state.startDate,
            endTime: this.state.endDate
        }
        this.props.search(obj, this.state.OperatorEnum, this.state.ProtocolEnum, this.state.SmsUserStatusEnum,this.state.TypeEnum,this.state.chargingTypeArr)
    }
    showAddModal() {
        this.setState({
            showAddModal: true
        })
        this.props.form.setFieldsInitialValue({
            gatewayType: this.state.TypeEnum[1].index,
            protocol: this.state.ProtocolEnum[1].index,
            type: this.state.OperatorEnum[1].index,
            chargingType:this.state.chargingTypeArr[0].index
        })
    }
    handleCancel() {
        this.setState({
            showAddModal: false
        })
    }
    handleSure(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let data = JSON.parse(JSON.stringify(values))
                data.flowSpeed = parseInt(data.flowSpeed, 10)
                data.accessNumber = parseInt(data.accessNumber, 10) || ''
                data.alarmPhone = parseInt(data.alarmPhone, 10) || ''
                data.alarmLine = parseInt(data.alarmLine, 10)
                data.serverPort = parseInt(data.serverPort, 10)
                axios.post(Api['addGateway'], data).then(res => {
                    if (res) {
                        this.search();
                        this.props.form.resetFields()
                        message.success('提交成功')
                        this.setState({
                            showAddModal: false
                        })
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            }
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 7 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        };
        return (
            <Navbar ref={(item) => {oper=item}}>
                <Form layout="inline">
                    <FormItem label="通道名称"><Input style={{ width: '150px' }} ref={(input) => { this.nameInput = input }} /></FormItem>
                    <FormItem label="通道编码"><Input style={{ width: '150px' }} ref={(input) => { this.codeInput = input }} /></FormItem>
                    <FormItem label="通道类型">
                        <Select defaultValue='' style={{ width: 120 }} ref={(input) => { this.gatewayTypeInput = input }}>
                            {this.state.TypeEnum.map((item, index) => { return <Option value={item.index} key={index}>{item.desc}</Option> })}
                        </Select>
                    </FormItem>
                    <FormItem label="运营商" >
                        <Select defaultValue='' style={{ width: 120 }} ref={(input) => { this.operatorInput = input }}>
                            {this.state.OperatorEnum.map((item, index) => { return <Option value={item.index} key={index}>{item.desc}</Option> })}
                        </Select>
                    </FormItem>
                    <FormItem label="协议类型">
                        <Select defaultValue='' style={{ width: 120 }} ref={(input) => { this.httpInput = input }}>
                            {this.state.ProtocolEnum.map((item, index) => { return <Option value={item.index} key={index}>{item.desc}</Option> })}
                        </Select>
                    </FormItem>
                    <FormItem label="接入号"><Input style={{ width: '150px' }} ref={(input) => { this.accessNumberInput = input }} /></FormItem>
                    <FormItem label="通道状态">
                        <Select defaultValue='' style={{ width: 120 }} ref={(input) => { this.userStatusInput = input }}>
                            {this.state.SmsUserStatusEnum.map((item, index) => { return <Option value={item.index} key={index}>{item.desc}</Option> })}
                        </Select>
                    </FormItem>
                    <FormItem label="开始时间">
                        <DatePicker format="YYYY-MM-DD" disabledDate={this.disabledstartTime.bind(this)} onChange={this.getTime.bind(this, 'start')} />
                    </FormItem>
                    <FormItem label="结束时间">
                        <DatePicker format="YYYY-MM-DD" disabledDate={this.disabledendTime.bind(this)} onChange={this.getTime.bind(this, 'end')} />
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="search" onClick={this.search.bind(this)}>查询</Button>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="plus" onClick={this.showAddModal.bind(this)}>添加</Button>
                    </FormItem>
                </Form>
                <Modal width={800} visible={this.state.showAddModal} onCancel={this.handleCancel.bind(this)} title="新增" footer={[
                    <Button key="sure" type="primary" onClick={this.handleSure.bind(this)}>确定</Button>,
                    <Button key="cancel" type="danger" onClick={this.handleCancel.bind(this)}>取消</Button>
                ]} >
                    <div style={{ width: "50%", display: 'inline-block', float: 'left' }}>
                        <FormItem label="通道名称" {...formItemLayout}>
                            {getFieldDecorator('name', { validateFirst: true, rules: [{ required: true, message: '请输入通道名称' }, { max: 20, message: '20位以内' },Com.validateSpace] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="运营商" {...formItemLayout}>
                            {getFieldDecorator('type', { rules: [{ required: true, message: '必选' }] })(<Select style={{ width: 180 }}>
                                {this.state.OperatorEnum.map((item, index) => { if (item.index || item.index === 0) { return <Option value={item.index} key={index}>{item.desc}</Option> } else { return null } })}
                            </Select>
                            )}
                        </FormItem>
                        <FormItem label="服务地址" {...formItemLayout}>
                            {getFieldDecorator('serverAddr', {
                                validateFirst: true,
                                rules: [{ required: true, message: '请输入服务地址' },
                                { max: 255, message: '255位以内' },Com.validateSpace]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="账号" {...formItemLayout}>
                            {getFieldDecorator('account', { validateFirst: true, rules: [{ required: true, message: '请输入账号' }, { max: 50, message: '50位以内' },Com.validateSpace] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="回调响应" {...formItemLayout}>
                            {getFieldDecorator('notifyResult', { validateFirst: true, rules: [{ max: 50, message: '50位以内' }] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="告警号码" {...formItemLayout}>
                            {getFieldDecorator('alarmPhone', {
                                validateFirst: true,
                                rules: [
                                    { len: 11, message: '请输入11位电话号码' },
                                    { validator: validateNumber }
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="接入号" {...formItemLayout}>
                            {getFieldDecorator('accessNumber', {
                                validateFirst: true,
                                rules: [
                                    { max: 20, message: '20位以内' },
                                    { validator: validateNumber }
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="单价" {...formItemLayout}>
                            {getFieldDecorator('price', {
                                validateFirst: true,
                                rules: [
                                    { max: 6, message: '6位以内' },
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="自定义参数" {...formItemLayout}>
                            {getFieldDecorator('custom', { validateFirst: true, rules: [{ max: 500, message: '500位以内' }] })(<TextArea rows={2} style={{ width: 300 }} />)}
                        </FormItem>
                    </div>
                    <div style={{ width: "50%", display: 'inline-block', float: 'left' }}>
                        <FormItem label="通道编码" {...formItemLayout}>
                            {getFieldDecorator('code', { validateFirst: true, rules: [{ required: true, message: '请输入通道编码' }, { max: 20, message: '20位以内' },Com.validateSpace] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="通道类型" {...formItemLayout}>
                            {getFieldDecorator('gatewayType', { rules: [{ required: true, message: '必选' }] })(<Select style={{ width: 180 }}>
                                    {this.state.TypeEnum.map((item, index) => { if (item.index) { return <Option value={item.index} key={index}>{item.desc}</Option> } else { return null } })}
                                </Select>
                            )}
                        </FormItem>
                        <FormItem label="协议类型" {...formItemLayout}>
                            {getFieldDecorator('protocol', { rules: [{ required: true, message: '必选' }] })(<Select style={{ width: 180 }}>
                                {this.state.ProtocolEnum.map((item, index) => { if (item.index) { return <Option value={item.index} key={index}>{item.desc}</Option> } else { return null } })}
                            </Select>
                            )}
                        </FormItem>
                        <FormItem label="服务端口" {...formItemLayout}>
                            {getFieldDecorator('serverPort', {
                                initialValue: '0',
                                validateFirst: true,
                                rules: [
                                    { required: true, message: '请输入服务端口' },
                                    { max: 10, message: '10位以内' },
                                    { validator: validateNumber },Com.validateSpace]
                            })(
                                <Input style={{ width: 180 }} />
                            )}
                        </FormItem>
                        <FormItem label="密码" {...formItemLayout}>
                            {getFieldDecorator('password', { validateFirst: true, rules: [{ required: true, message: '请输入密码' }, { max: 50, message: '50位以内' },Com.validateSpace] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="网关流速" {...formItemLayout}>
                            {getFieldDecorator('flowSpeed', {
                                validateFirst: true,
                                rules: [
                                    { validator: validateNumber },Com.validateSpace
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="告警阈值(条)" {...formItemLayout}>
                            {getFieldDecorator('alarmLine', {
                                validateFirst: true,
                                rules: [
                                    { max: 6, message: '6位以内' },
                                    { validator: validateNumber },Com.validateSpace
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="计费类型" {...formItemLayout}>
                            {getFieldDecorator('chargingType', { rules: [{ required: true, message: '必选' }] })(<Select style={{ width: 180 }}>
                                    {this.state.chargingTypeArr.map((item, index) => { if (item.index) { return <Option value={item.index} key={index}>{item.desc}</Option> } else { return null } })}
                                </Select>
                            )}
                        </FormItem>
                    </div>
                    <div style={{ clear: 'both' }}></div>
                </Modal>
            </Navbar>
        )
    }
}

const ValidateOperbar = Form.create()(OperBar);

class Table1 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            dataNum: 0,
            tableHeight: 300,
            tableData: this.props.tableData,
            showEditModal: false,
            TypeEnum:[],
            OperatorEnum: [],
            ProtocolEnum: [],
            SmsUserStatusEnum: [],
            chargingTypeArr:[],
            nowRowId: 0,
            currentPage: 1
        }
    }
    componentWillMount() {
        this.setState({
            chargingTypeArr:this.props.selectData[4],
            TypeEnum:this.props.selectData[3],
            SmsUserStatusEnum: this.props.selectData[2],
            ProtocolEnum: this.props.selectData[1],
            OperatorEnum: this.props.selectData[0]
        })
    }
    componentDidMount() {
        setTimeout(() => {
            let operbarHeight = oper.box.offsetHeight + 10 + 10;
            this.setState({
                tableHeight: store.getState().mainTableSize - operbarHeight - 45 - 33 - 71 - 15 - 30
            })
            this.unscribe = store.subscribe(this.fullTable.bind(this))
        }, 100)
    }
    componentWillReceiveProps(nextprops) {
        this.setState({
            tableData: nextprops.tableData,
            dataNum: nextprops.dataNum,
            chargingTypeArr:nextprops.selectData[4],
            TypeEnum:nextprops.selectData[3],
            SmsUserStatusEnum: nextprops.selectData[2],
            ProtocolEnum: nextprops.selectData[1],
            OperatorEnum: nextprops.selectData[0],
            currntPage: nextprops.currentPage,
        })
    }
    componentWillUnmount() {
        this.unscribe()
    }
    fullTable() {
        let operbarHeight = oper.box.offsetHeight + 10 + 10;
        this.setState({
            tableHeight: store.getState().mainTableSize - operbarHeight - 45 - 33 - 71 - 15 - 30
        })
    }
    editModalShow(record) {
        this.setState({
            showEditModal: true,
            nowRowId: record.id
        })
        this.props.form.setFieldsInitialValue({
            name: record.name,
            code: record.code,
            type: record.type,
            gatewayType: record.gatewayType,
            protocol: record.protocol,
            serverAddr: record.serverAddr,
            serverPort: record.serverPort.toString(),
            accessNumber: record.accessNumber,
            price: record.price.toString(),
            chargingType:record.chargingType,
            account: record.account,
            password: record.password,
            flowSpeed: record.flowSpeed,
            notifyResult: record.notifyResult,
            custom: record.custom,
            alarmPhone: record.alarmPhone ? record.alarmPhone.toString() : '',
            alarmLine: record.alarmLine.toString()
        })
    }
    editCancel() {
        this.setState({
            showEditModal: false
        })
        this.props.form.resetFields()
    }
    editSure(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let data = JSON.parse(JSON.stringify(values))
                data.flowSpeed = parseInt(data.flowSpeed, 10)
                data.accessNumber = parseInt(data.accessNumber, 10) || ''
                data.alarmPhone = parseInt(data.alarmPhone, 10) || ''
                data.alarmLine = parseInt(data.alarmLine, 10)
                data.serverPort = parseInt(data.serverPort, 10)
                data.id = this.state.nowRowId;
                axios.post(Api['updateGateway'], data).then(res => {
                    if (res) {
                        this.props.search();
                        this.props.form.resetFields()
                        message.success('提交成功')
                        this.setState({
                            showEditModal: false
                        })
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            }
        });
    }
    deleteRow(record) {
        this.props.deleteRow(record)
    }
    changeStatus(record) {
        let that = this;
        let text = record.status === 1 ? '禁用' : '启用';
        confirm({
            title: text,
            content: '您确定要' + text + record.name + '吗？',
            okText: text,
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                axios.post(Api['channelChangeStatus'] + '?id=' + record.id).then(res => {
                    if (res) {
                        that.props.search();
                        message.success('修改成功')
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            onCancel() { },
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 7 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 17 },
            },
        };
        const columns = [
            { title: 'ID', dataIndex: 'id', key: '20', width: 50 },
            { title: '通道名称', dataIndex: 'name', key: '1', width: 220 },
            { title: '通道编码', dataIndex: 'code', key: '2', width: 200 },
            {
                title: '通道类型', key: '19', width: 100, render(record) {
                    return <span>{record.gatewayType === 1 ? '行业' : record.gatewayType === 2 ? '营销' : '验证码'}</span>
                }
            },
            { title: '运营商', dataIndex: 'typeName', key: '3', width: 100 },
            { title: '协议类型', dataIndex: 'protocolName', key: '4', width: 100 },
            {
                title: '服务地址', key: '5', width: 200, render: (record) => {
                    return (
                        <Popconfirm overlayClassName='no-cancel-pop' placement="top" title={record.serverAddr}>
                            <a>{record.serverAddrAbb}</a>
                        </Popconfirm>
                    )
                }
            },
            { title: '服务端口', dataIndex: 'serverPort', key: '6', width: 100 },
            { title: '账号', key: '7', width: 170,render: (record) => {
                return (
                    <Popconfirm overlayClassName='no-cancel-pop' placement="top" title={record.account}>
                        <a>{record.accountAbb}</a>
                    </Popconfirm>
                )
        } },
            { title: '密码',  key: '8', width: 180, render: (record) => {
                    return (
                        <Popconfirm overlayClassName='no-cancel-pop' placement="top" title={record.password}>
                            <a>{record.passwordAbb}</a>
                        </Popconfirm>
                    )
            } },
            { title: '余额(条)', dataIndex: 'balance', key: '9', width: 100 },
            { title: '单价', dataIndex: 'price', key: '18', width: 100 },
            { title: '流速(条/s)', dataIndex: 'flowSpeed', key: '10', width: 150 },
            { title: '接入号', dataIndex: 'accessNumber', key: '11', width: 150 },
            {
                title: '状态', key: '12', width: 80, render: (record) => {
                    return <span style={{ color: record.status === 1 ? 'green' : 'red' }}>{record.statusName}</span>
                }
            },
            { title: '回调响应', dataIndex: 'notifyResult', key: '13', width: 120 },
            { title: '告警号码', dataIndex: 'alarmPhone', key: '14', width: 150 },
            { title: '告警阈值(条)', dataIndex: 'alarmLine', key: '15', width: 180 },
            { title: '创建时间', dataIndex: 'createTime', key: '16', width: 200 },
            {
                title: '操作',
                fixed: 'right',
                key: '17',
                width: 200,
                render: (record) => {
                    return (
                        <div>
                            <a onClick={this.changeStatus.bind(this, record)}>{record.status === 1 ? '禁用' : '启用'}</a>
                            <a onClick={this.editModalShow.bind(this, record)} style={{ marginLeft: '10px ' }}>编辑</a>
                            <a onClick={this.deleteRow.bind(this, record)} style={{ marginLeft: '10px ' }}>删除</a>
                        </div>
                    )
                }
            },
        ];
        return (
            <div className="common-table">
                <Table title={(data) => { return '通道信息列表' }} columns={columns} dataSource={this.state.tableData} pagination={{
                    onChange: this.props.changePage,
                    onShowSizeChange: this.props.changePageSize,
                    defaultPageSize: 20,
                    pageSizeOptions: ['20', '50', '100'],
                    showSizeChanger: true,
                    showQuickJumper: true,
                    current: this.state.currntPage,
                    total: this.state.dataNum,
                    showTotal: total => `共 ${total} 条数据`
                }} scroll={{ x: 2560, y: this.state.tableHeight }}></Table>
                <Modal width={800} visible={this.state.showEditModal} onCancel={this.editCancel.bind(this)} title="编辑" footer={[
                    <Button key="sure" type="primary" onClick={this.editSure.bind(this)}>确定</Button>,
                    <Button key="cancel" type="danger" onClick={this.editCancel.bind(this)}>取消</Button>
                ]} >
                    <div style={{ width: "50%", display: 'inline-block', float: 'left' }}>
                        <FormItem label="通道名称" {...formItemLayout}>
                            {getFieldDecorator('name', { validateFirst: true, rules: [{ required: true, message: '请输入通道名称' }, { max: 20, message: '20位以内' },Com.validateSpace] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="运营商" {...formItemLayout}>
                            {getFieldDecorator('type', { rules: [{ required: true, message: '必选' }] })(<Select style={{ width: 180 }}>
                                {this.state.OperatorEnum.map((item, index) => { if (item.index || item.index === 0) { return <Option value={item.index} key={index}>{item.desc}</Option> } else { return null } })}
                            </Select>
                            )}
                        </FormItem>
                        <FormItem label="服务地址" {...formItemLayout}>
                            {getFieldDecorator('serverAddr', {
                                validateFirst: true,
                                rules: [{ required: true, message: '请输入服务地址' },
                                { max: 255, message: '255位以内' },Com.validateSpace]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="账号" {...formItemLayout}>
                            {getFieldDecorator('account', { validateFirst: true, rules: [{ required: true, message: '请输入账号' }, { max: 50, message: '50位以内' },Com.validateSpace] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="回调响应" {...formItemLayout}>
                            {getFieldDecorator('notifyResult', { validateFirst: true, rules: [{ max: 50, message: '50位以内' }] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="告警号码" {...formItemLayout}>
                            {getFieldDecorator('alarmPhone', {
                                validateFirst: true,
                                rules: [
                                    { len: 11, message: '请输入11位电话号码' },
                                    { validator: validateNumber }
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="接入号" {...formItemLayout}>
                            {getFieldDecorator('accessNumber', {
                                validateFirst: true,
                                rules: [
                                    { max: 20, message: '20位以内' },
                                    { validator: validateNumber }
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="单价" {...formItemLayout}>
                            {getFieldDecorator('price', {
                                validateFirst: true,
                                rules: [
                                    { max: 6, message: '6位以内' }
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="自定义参数" {...formItemLayout}>
                            {getFieldDecorator('custom', { validateFirst: true, rules: [{ max: 500, message: '500位以内' }] })(<TextArea rows={2} style={{ width: 300 }} />)}
                        </FormItem>
                    </div>
                    <div style={{ width: "50%", display: 'inline-block', float: 'left' }}>
                        <FormItem label="通道编码" {...formItemLayout}>
                            {getFieldDecorator('code', { validateFirst: true, rules: [{ required: true, message: '请输入通道编码' }, { max: 20, message: '20位以内' },Com.validateSpace] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="通道类型" {...formItemLayout}>
                            {getFieldDecorator('gatewayType', { rules: [{ required: true, message: '必选' }] })(<Select style={{ width: 180 }}>
                                    {this.state.TypeEnum.map((item, index) => { if (item.index) { return <Option value={item.index} key={index}>{item.desc}</Option> } else { return null } })}
                                </Select>
                            )}
                        </FormItem>
                        <FormItem label="协议类型" {...formItemLayout}>
                            {getFieldDecorator('protocol', { rules: [{ required: true, message: '必选' }] })(<Select disabled style={{ width: 180 }}>
                                {this.state.ProtocolEnum.map((item, index) => { return <Option value={item.index} key={index}>{item.desc}</Option> })}
                            </Select>
                            )}
                        </FormItem>
                        <FormItem label="服务端口" {...formItemLayout}>
                            {getFieldDecorator('serverPort', {
                                validateFirst: true,
                                rules: [
                                    { required: true, message: '请输入服务端口' },
                                    { max: 10, message: '10位以内' },
                                    { validator: validateNumber },Com.validateSpace]
                            })(
                                <Input style={{ width: 180 }} />
                            )}
                        </FormItem>
                        <FormItem label="密码" {...formItemLayout}>
                            {getFieldDecorator('password', { validateFirst: true, rules: [{ required: true, message: '请输入密码' }, { max: 50, message: '50位以内' },Com.validateSpace] })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="网关流速" {...formItemLayout}>
                            {getFieldDecorator('flowSpeed', {
                                validateFirst: true,
                                rules: [
                                    { validator: validateNumber },Com.validateSpace
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="告警阈值(条)" {...formItemLayout}>
                            {getFieldDecorator('alarmLine', {
                                validateFirst: true,
                                rules: [
                                    { max: 6, message: '6位以内' },
                                    { validator: validateNumber },Com.validateSpace
                                ]
                            })(<Input style={{ width: 180 }} />)}
                        </FormItem>
                        <FormItem label="计费类型" {...formItemLayout}>
                            {getFieldDecorator('chargingType', { rules: [{ required: true, message: '必选' }] })(<Select style={{ width: 180 }}>
                                    {this.state.chargingTypeArr.map((item, index) => { if (item.index) { return <Option value={item.index} key={index}>{item.desc}</Option> } else { return null } })}
                                </Select>
                            )}
                        </FormItem>
                    </div>
                    <div style={{ clear: 'both' }}></div>
                </Modal>
            </div >
        )
    }
}

const ValidateTable = Form.create()(Table1);

class Box extends Component {
    constructor(props) {
        super(props)
        this.state = {
            totalNum: 0,
            tableData: [],
            searchParams: {},
            paginationData: {
                current: 1,
                pageNum: 1,
                pageSize: 20
            },
            simSelectData: [],
            statusSelectData: [],
            OperatorEnum: [],
            ProtocolEnum: [],
            SmsUserStatusEnum: [],
            chargingTypeArr:[],
            TypeEnum:[],
            loading: true,
            currentPage: 1,
        }
    }
    setParams(obj, OperatorEnum, ProtocolEnum, SmsUserStatusEnum,TypeEnum,chargingTypeArr) {
        let data = JSON.parse(JSON.stringify(obj));
        this.setState({
            searchParams: data,
            OperatorEnum,
            ProtocolEnum,
            TypeEnum,
            SmsUserStatusEnum,
            chargingTypeArr
        }, () => {
            this.search('btn');
        })
    }
    search(type) {
        let data = JSON.parse(JSON.stringify(this.state.searchParams));
        if (type === 'btn') {
            data.pageNum = 1;
            this.setState({
                currentPage: 1
            })
        } else {
            data.pageNum = this.state.paginationData.pageNum;
        }
        data.pageSize = this.state.paginationData.pageSize;
        this.setState({
            loading: true,
        })
        axios.post(Api['getGatewayByParams'], data).then((res) => {
            if (res) {
                let data = JSON.parse(JSON.stringify(res.data));
                data.list.forEach((item, index) => {
                    item.key = index;
                    item.serverAddrAbb = Com.abbrData(item.serverAddr, 20);
                    item.accountAbb = Com.abbrData(item.account, 15);
                    item.passwordAbb = Com.abbrData(item.password, 15);                    
                })
                this.setState({
                    loading: false,
                    tableData: data.list,
                    totalNum: data.total
                })
            }
        }).catch((error) => {
            console.log(error)
        })
    }
    changePageSize(current, size) {
        let pagination = JSON.parse(JSON.stringify(this.state.paginationData))
        pagination.pageNum = current;
        pagination.pageSize = size;
        this.setState({
            paginationData: pagination,
            currentPage: current
        }, () => { this.search('pag') })
    }
    changePage(pageNum, pageSize) {
        let pagination = JSON.parse(JSON.stringify(this.state.paginationData))
        pagination.pageNum = pageNum;
        pagination.pageSize = pageSize;
        this.setState({
            paginationData: pagination,
            currentPage: pageNum
        }, () => { this.search('pag') })
    }
    deleteRow(record) {
        let that = this;
        confirm({
            title: '删除',
            content: '您确定要删除' + record.name + '吗？',
            okText: '删除',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                axios.post(Api['deleteGateway'] + '?id=' + record.id).then(res => {
                    if (res) {
                        that.search();
                        message.success('删除成功')
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            onCancel() { },
        });
    }
    render() {
        return (
            <div>
                <ValidateOperbar search={this.setParams.bind(this)} />
                <Spin spinning={this.state.loading} indicator={antIcon}>
                    <ValidateTable
                        search={this.search.bind(this)}
                        tableData={this.state.tableData}
                        dataNum={this.state.totalNum}
                        changePageSize={this.changePageSize.bind(this)}
                        changePage={this.changePage.bind(this)}
                        currentPage={this.state.currentPage}
                        deleteRow={this.deleteRow.bind(this)}
                        selectData={[this.state.OperatorEnum, this.state.ProtocolEnum, this.state.SmsUserStatusEnum,this.state.TypeEnum,this.state.chargingTypeArr]}
                    />
                </Spin>
            </div>
        )
    }
}

export default Box